<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red; position:absolute; left:200px; top:200px; }
</style>
<script>

window.onload = function(){
	var oDiv = document.getElementById('div1');
	
	var disX = 0;
	var disY = 0;
	var disW = 0;
	var disH = 0;
	var disL = 0;
	var disT = 0;
	
	var num = 0;
	var bBtn = true;
	
	oDiv.onmousemove = function(ev){
		var ev = ev || window.event;
		var L = oDiv.offsetLeft + 10;
		var R = oDiv.offsetLeft + oDiv.offsetWidth - 10;
		var T = oDiv.offsetTop + 10;
		var B = oDiv.offsetTop + oDiv.offsetHeight - 10;
		if(ev.clientX > R){  //右
			oDiv.style.cursor = 'e-resize';
			if(bBtn){
				num = 1;
			}
		}
		else if(ev.clientY > B){  //下
			oDiv.style.cursor = 's-resize';
			if(bBtn){
				num = 2;
			}
		}
		else if(ev.clientX < L){  //左
			oDiv.style.cursor = 'e-resize';
			if(bBtn){
				num = 3;
			}
		}
		else if(ev.clientY < T){  //上
			oDiv.style.cursor = 's-resize';
			if(bBtn){
				num = 4;
			}
		}
		else{
			oDiv.style.cursor = 'default';
		}
		
		if(ev.clientX > R && ev.clientY > B ){ //右下
			oDiv.style.cursor = 'se-resize';
			if(bBtn){
				num = 5;
			}
		}
		else if( ev.clientX > R && ev.clientY < T ){  //右上
			oDiv.style.cursor = 'ne-resize';
			if(bBtn){
				num = 6;
			}
		}
		else if( ev.clientX < L && ev.clientY > B ){  //左下
			oDiv.style.cursor = 'ne-resize';
			if(bBtn){
				num = 7;
			}
		}
		else if( ev.clientX < L && ev.clientY < T ){  //左上
			oDiv.style.cursor = 'se-resize';
			if(bBtn){
				num = 8;
			}
		}
		
	};
	
	
	oDiv.onmousedown = function(ev){
		var ev = ev || window.event;
		disX = ev.clientX;
		disY = ev.clientY;
		disW = oDiv.offsetWidth;
		disH = oDiv.offsetHeight;
		disL = oDiv.offsetLeft;
		disT = oDiv.offsetTop;
		
		bBtn = false;
		
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			var L = oDiv.offsetLeft + 10;
			var R = oDiv.offsetLeft + oDiv.offsetWidth - 10;
			var T = oDiv.offsetTop + 10;
			var B = oDiv.offsetTop + oDiv.offsetHeight - 10;
			
			if(num == 5){ //右下
				oDiv.style.width = ev.clientX - disX + disW + 'px';
				oDiv.style.height = ev.clientY - disY + disH + 'px';			
			}
			else if(num == 1){
				oDiv.style.width = ev.clientX - disX + disW + 'px';			
			}
			
		};
		
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
			bBtn = true;
		};
		
	};
	
};

</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>
